<template>
    <el-popover
        placement="right"
        width="500"
        trigger="click"
    >
        <el-table
            ref="historyTableData"
            :data="historyTableData"
            v-sortTable="{ 'tableData': historyTableData, '_this': this, 'ref': 'historyTableData' }"
        >
            <el-table-column
                width="150"
                property="modifiedName"
                label="修改人"
            ></el-table-column>
            <el-table-column
                width="150"
                property="gmtModified"
                label="修改时间"
            ></el-table-column>
            <el-table-column
                width="100"
                property="oriValue"
                label="原数据"
            ></el-table-column>
            <el-table-column
                width="100"
                property="newValue"
                label="修改后数据"
            ></el-table-column>
        </el-table>
            <img
            @click="clickIcon"
            slot="reference"
            src="@/assets/icon_history.png"
        />
    </el-popover>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        // ...mapState(['historyTableData'])
        ...mapState(['historyTableData'])
    },
    watch: {
        historyTable (val) {
            console.log(val)
        }
    },
    data () {
        return{

        }
    },
    methods: {
        clickIcon () {
            this.$emit('clickIcon')
        },

    }
}
</script>

<style lang="scss" scoped>
    img{
        margin-left: 15px;
        width: 24px;
        height: 24px;
    }
</style>